<template>
  <div id="bas" class="flex">
    <div class="flex flex-start" style="flex: 1" v-show="showPrevNext">
      <img
        class="active"
        v-if="isprev"
        src="@/assets/img/title/left.svg"
        @click="prev()"
        title="上一页"
      />
      <img
        v-bind:class="{ active: isprev }"
        v-else
        src="@/assets/img/title/left-noactive.svg"
        title="下一页"
      />
    </div>
    <div class="flex flex-start" style="flex: 1" v-show="showPrevNext">
      <img
        class="active"
        v-if="isnext"
        src="@/assets/img/title/right.svg"
        @click="next()"
        title="下一页"
      />
      <img
        v-bind:class="{ active: isnext }"
        v-else
        src="@/assets/img/title/right-noactive.svg"
        title="下一页"
      />
    </div>
    <div class="flex flex-start" style="flex: 22; justify-content: flex-end">
      <search-c></search-c>
    </div>
    <div class="flex flex-start" style="flex: 1">
      <img
        class="active"
        src="@/assets/img/title/user.svg"
        title="登录或用户信息"
      />
    </div>
    <div class="flex flex-start" style="flex: 1">
      <img
        class="active"
        src="@/assets/img/title/time.svg"
        @click="historydraweropen()"
        title="历史记录"
      />
    </div>
  </div>
</template>

<script>
import searchC from "@/components/title/search/Search";

export default {
  name: "bas",
  data(){
    return{
    }
  },
  props:{
	showPrevNext:{
		type:Boolean,
		default:true
	}  
  },
  components: {
    searchC,
  },
  methods: {
    prev() {
      this.$router.replace(this.location[this.pageindex - 1]);
      this.$store.commit({
        type: "updatapageindexjian",
      });
    },
    next() {
      this.$router.replace(this.location[this.pageindex + 1]);
      this.$store.commit({
        type: "updatapageindexjia",
      });
    },
    historydraweropen() {
      this.$openHistory()
    }
  },
  computed: {
    location() {
      return this.$store.state.pageinfo.location;
    },
    locationlength() {
      return this.$store.state.pageinfo.location.length;
    },
    pageindex() {
      return this.$store.state.pageinfo.pageindex;
    },
    isprev() {
      // if(this.locationlength==1||this.pageindex==0){
      // 	return false
      // }
      // else{
      // 	return this.$store.state.pageinfo.location.length>=this.$store.state.pageinfo.pageindex
      // }
      return this.locationlength == 1 || this.pageindex == 0
        ? false
        : this.$store.state.pageinfo.location.length >=
            this.$store.state.pageinfo.pageindex;
    },
    isnext() {
      // if(this.locationlength==1||this.pageindex+1==this.locationlength){
      // 	return false
      // }
      // else{
      // 	return this.locationlength!=this.pageindex
      // }
      return this.locationlength == 1 ||
        this.pageindex + 1 == this.locationlength
        ? false
        : this.locationlength != this.pageindex;
    },
  },
};
</script>

<style scoped>
#bas {
  width: 100%;
  height: 100%;
}
#bas img {
  width: 25px;
}
#bas .active {
  cursor: pointer;
  transition: all 0.3s;
}
#bas .active:hover {
  opacity: 0.7;
}
@media screen and (max-width: 1024px) {
  #bas{
    margin-top: 45px;
  }
}
</style>
